<template>
  <!-- 我的督办内容 -->
  <div>
    <div style="display: flex; justify-content: flex-end">
      <el-select v-model="value" placeholder="请选择" @change="changeSelect">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>

    <el-table :data="tableData" border style="width: 100%; margin: 10px 0" height="560">
      <el-table-column fixed prop="dbnr" label="督办内容" width="200" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="dbr" label="督办人" width="120" align="center" />
      <el-table-column prop="bdbr" label="被督办人" width="120" align="center" />
      <el-table-column prop="hfnr" label="审批意见" width="200" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="createTime" label="创建时间" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="督办状态" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'">待督办</span>
          <span v-else-if="scope.row.status === '1'">督办完成</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="120">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status == '1'" type="text" size="small"
            @click="handleClickDetail(scope.row)">督办</el-button>
          <el-button :disabled="scope.row.status == '1'" type="text" size="small"
            @click="cxBtn(scope.row)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: flex-end">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, sizes, jumper"
        :total="totalNum">
      </el-pagination>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="80%" title=督办意见>
      <el-form label-position="top">
        <el-form-item>
          <el-input v-model="dbyj" type="textarea" :row="4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDbyj">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  xqlist,
  xqlistDetail,
  cxDeletebyid,
  getMySupervisor,
  getAllSupervisor,
  deleteMyMySupervisor,
  submitSupervisor,
} from "@/utils/httpUtils";
export default {
  props: {
    type: {
      type: String,
      default: "self",
    }
  },
  data() {
    return {
      dialogVisible: false,
      value: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "待督办",
        },
        {
          value: "1",
          label: "督办完成",
        },
      ],
      name: "",
      tableData: [],
      activeName: "dataResource",
      currentPage: 1,
      pageNo: 1,
      pageSize: 10,
      status: "",
      totalNum: 0,
      detailsList: {
        resourceName: "",
        resourceType: "",
        applyInstitution: "",
        createUser: "",
        type: "",
        updateTime: "",
        description: "",
        createTime: "",
        updateUser: "",
        auditStatus: "",
      },
      updateCycleList: [],
      shareTypeList: [],
      ShareModeList: [],
      resourceType: 0,
      detailList: {},
      dbyj: "",

      activeDb: null,
    };
  },
  mounted() {
    this.initData()
  },
  //   处理1703592547000 时间格式
  filters: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  methods: {
    cxBtn(row) {
      this.$confirm('是否撤销?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMyMySupervisor(row.id).then(res => {
          console.log(res, "撤销123")
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '撤回成功!'
            });
            this.initData()
          }
        }).catch((err) => {
          console.log(err, "err")
          this.$message({
            type: 'error',
            message: err.response.data.message
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      })

    },
    handleClickDetail(row) {
      this.dialogVisible = true
      this.activeDb = row;
      // console.log(row.id, "row")
      // xqlistDetail({ id: row.id }).then(res => {
      //   console.log(res, '详情')
      //   this.dialogVisible = true
      //   this.detailList = res
      // })
    },

    // 选择框修改
    changeSelect(val) {
      this.status = val;
      this.initData();
    },
    // 初始化数据
    async initData() {
      let params = {
        status: this.value,
        page: this.pageNo,
        pageSize: this.pageSize,
      }
      let res = this.type === 'all' ? await getAllSupervisor(params) : await getMySupervisor(params)
      this.tableData = res.content;
      this.totalNum = res.totalElements;
      this.name = "";
    },
    submitDbyj() {
      submitSupervisor({ id: this.activeDb.id, spyj: this.dbyj })
        .then(res => {
          if (res.code == "200") {
            this.$message.success(res.msg);
            this.dialogVisible = false;
            this.initData();
          } else {
            throw 1;
          }
        })
        .catch((err) => {
          this.$message.error("审批失败");
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.initData();
    },
  },
};
</script>
<style scoped>
.listToggle {
  padding: 13px 20px;
}

.listToggle.backBtn {
  border-bottom: 4px solid #198ef8;
}
</style>
